<template>
  <div
    class="skimmer-ellipsis"
    :style="{ '-webkit-line-clamp': this.lineClamp }"
  >
    <slot></slot>
  </div>
</template>

<script>
import { getContentHeight, debounce } from "./helper";
import ResizeObserver from "resize-observer-polyfill";
export default {
  name: "skimmer-ellipsis",
  props: {
    lineClamp: {
      type: Number,
      default: 1
    }
  },
  mounted() {
    const callback = debounce(() => {
      this.getSuperLong();
    }, 300);
    const observer = new ResizeObserver(callback);
    observer.observe(this.$el);
    this.$once("hook:beforeDestory", () => {
      observer.disconnect();
    });
  },
  updated() {
    this.getSuperLong();
  },
  methods: {
    getSuperLong() {
      const height = getContentHeight(this.$el);
      const cloneEle = this.$el.cloneNode();
      this.$el.parentElement.appendChild(cloneEle);
      cloneEle.innerHTML = this.$el.innerHTML;
      cloneEle.style["-webkit-line-clamp"] = this.lineClamp + 1;
      const longHeight = getContentHeight(cloneEle);
      this.$el.parentElement.removeChild(cloneEle);
      this.$emit("getLong", longHeight > height);
    }
  }
};
</script>

<style scoped>
.skimmer-ellipsis {
  overflow: hidden;
  white-space: normal;
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;
}
</style>
